/*
  学习目标：不可变数据
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 1.声明数据
  state = {
    list: [1, 2, 3],
  };

  // 2. 定义事件，绑定事件
  handleClick = () => {
    // ❌this.state.list.push(4);

    //
    this.setState({
      // 💥 不可变数据： 不允许修改原始数据， 使用新值覆盖旧值
      list: [...this.state.list, 4],
    });

    //
    // new Array()  === new Array()
    //  [] === []

    // new Object() === new Object()
    // {}  === {}
  };

  render() {
    return (
      <div>
        <h1>{this.state.list}</h1>
        <button onClick={this.handleClick}>点我+4</button>
      </div>
    );
  }
}
